Rendering the Root Component and Strict Mode

Firat Atalay

6 min read

·

Jun 14, 2023

Welcome to the Pizza Menu project that we’re going to build throughout this section. And in this lecture, I actually want to start to build this project from complete scratch. And with complete scratch, I mean that we are going to delete all of these files that we have here that we don’t really need, and start a project from scratch, as I just said. So let’s close this one and this one and even the index.HTML which we will not delete and recreate, but all of these feel free to ignore them and to delete them. So delete, and let’s start from scratch.

So here we have our first error and notice that I placed the browser here on one side and our code editor on the left sidem so that we can always see the output at the same time. So you see that our application is kind of looking for this file right here, but of course it doesn’t exist anymore because we just deleted it.

So, let’s start from scratch. And we’re going to create our first file inside of this folder, and it’s going to be called index.js, and it really needs to be called index.js because webpack, which is the module bundler in this project, expects the entry point to be called index.js. All right? But anyway, let’s now start by importing React from ‘react’. And again, this is just simple JavaScript here. So importing modules is part of JavaScript, and specifically since ES6. Then let’s also import ReactDOM from “react-dom/client”. All right? And as I keep saving, somehow it keeps moving the file here but nevermind. So we just imported these two libraries, and again remember how we imported basically these exact two same libraries in the pure React lecture. And in fact, I want to open up that file here so that we can compare it. So open, and then on the desktop, pure React, then index.HTML. And so remember here we import it, also React and Reactdom, using these script texts. But again here, these were installed using NPM and here we are now importing them into our project using the import syntax, which is coming directly from JavaScript.

Next up, let’s actually create our App component again. So function App, and it wouldn’t have to be called App this is just a convention, right? What is necessary, is status component starts with an upper case here. So now let’s return here, again the same thing that we returned before which is just <h1>Hello React!</h1>.

And now all we need to do is to render this to the dump. And so once again this is going to be similar to what we did here. So we could even copy paste all of this here into our app that we already have, but let’s write it by hand. So of course in the future we will not be writing all of this by hand, but at least once I want you to write all of this by hand so that you actually know what is going on here. All right?

So let’s now create a so-called root. And for that we use the ReactDOM library on which there is a createRoot method. And so now we select this root element. Well not here of course, but in our public folder. So here you have all this stuff like this strange URL here. And again, webpack will take care of all of this like it will replace this URL right there. But what we’re looking for here is this div with this id. So id=”root”. So we are going to select this element so that React can render our application inside of this div. So document.getElementById. Okay, and then let’s do root.render. And we could also have written it all in one line. So without storing this here as an intermediary variable but like this, it’s a bit cleaner. Okay? And then here we place our App, give it a safe, and there it is. Hello React! Which is our nice app component right here. So this is how we write React from scratch basically.

Now I just want to draw your attention that this is the way that we render the root so that we basically render our app in the Dom in React version 18. So React v18. But if you’re seeing an older code base that is before React 18, this worked in a different way. So it looked a little bit different. So let’s just exemplify that here. And you don’t need to write this code here I just want to quickly show it to you. So before React 18, we would simply do React.render and then place the app in there. All right? And another change that we would have to do is to get rid of this. So this would be a React 17 app, but with these changes so with having react-dom/client and with rendering this way, we made our app ready for React 18. So we can now comment this one out, and I will just leave it here as a reference.

Now, just one final thing that I want to talk about here is strict mode. So we can simply activate strict mode by, instead of directly rendering the app component as a root component. Wrapping this here into a strict mode component. So let’s write React.StrictMode. And so this strict mode is basically a component that is part of React and that we can take from React. And so you see that automatically VS code then closes this component. So let’s copy or cut this from here and place it here, give it a safe. And so the app is now wrapped inside of this strict mode.

And strict mode is really not a big deal. The only thing that it does is that during development it will render all components twice in order to find certain bugs. And also React will check if we’re using outdated parts of the React API. So strict mode is nothing groundbreaking but it’s still a good idea to always activate it when we develop React applications.

BONUS FOR ME: